<template>
	<view class="uni-container">
		<uni-forms :border="true" ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="username" label="账号" labelPosition="top" :labclass="0">
				<uni-easyinput :inputBorder="false" placeholder="请填写账号" v-model="formData.username" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="nickname" label="昵称" labelPosition="top" :labclass="0">
				<uni-easyinput :inputBorder="false" placeholder="请填写昵称" v-model="formData.nickname" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="department_id" label="部门" labelPosition="top" :labclass="0">
				<!-- <view class="depart" @click="showTree()">{{department}}</view> -->
				<uni-easyinput placeholder="选择部门" @focus="showTree('department')" v-model="formData.department_name" trim="both"
						@iconClick="showTree('department')" suffixIcon="search" />
				</uni-forms-item>

			<uni-forms-item name="post" label="职位" labelPosition="top" :labclass="0">
				<uni-easyinput :inputBorder="false" placeholder="请填写职位" v-model="formData.post" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="mobile" label="电话" labelPosition="top" :labclass="0">
				<uni-easyinput :inputBorder="false" placeholder="请填写联系电话" maxlength="11" v-model="formData.mobile" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="email" label="邮箱" labelPosition="top" :labclass="0">
				<uni-easyinput :inputBorder="false" placeholder="请填写邮箱" v-model="formData.email" trim="both" />
			</uni-forms-item>
			<uni-easyinput style="display: none;" :inputBorder="false" v-model="formData.pic" trim="both" />
			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">提交</button>
			</view>
		</uni-forms>
		<tki-tree ref="tkitree" :range="list" :treeStatus="treeStatus" rangeKey="name"
			confirmColor="#5089f9" @confirm="treeConfirm"></tki-tree>
	</view>
</template>

<script>
import { validator } from '@/js_sdk/validator/opendb-contacts.js';
import tkiTree from '@/components/tki-tree/tki-tree.vue';
// 导入API模块
import api from '@/api/index.js'

// 移除clientDB相关的导入
// const db = uniCloud.database();
// const dbCollectionName = 'uni-id-users';

function getValidator(fields) {
  let reuslt = {}
  for (let key in validator) {
    if (fields.indexOf(key) > -1) {
      reuslt[key] = validator[key]
    }
  }
  return reuslt
}

export default {
  data() {
    return {
      list: [], //搜索选择器数据
      treeStatus: 1, //树组件加载状态 1，正在加载，2·暂无数据
      selectType: "", //搜索选择器选择的字段
      searchForm: {
        parent_id: ""
      },
      multiple: false,
      selectParent: false,
      flod: false,
      "department":"请选择部门",
      formData: {
        "department_name":'',
        "username": "",
        "department_id": [],
        "post": "",
        "mobile": "",
        "email": "",
        "avatar": "/static/txl/ico_logo_@3x.png"
      },
      formOptions: {},
      rules: {
        ...getValidator(["username", "nickname", "department_id", "post", "mobile", "email", "avatar"])
      }
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  onLoad() {
    
  },
  methods: {
    getDepartment() {
      var _this = this;
      _this.treeStatus = 1;
      // 使用API获取部门数据，替代clientDB
      api.contacts.getList().then((res) => {
        if(res.data == '') {
          _this.treeStatus = 2;
        }
        let userList = res.data;
        let listArr = [];
        userList.forEach(ele => {
          let obj = {};
          obj._id = ele._id;
          if (ele.pathName != undefined) {
            obj.name = ele.pathName;
          } else {
            obj.name = ele.name;
          }
          listArr.push(obj);
        });
        this.list = listArr;
      }).catch((err) => {
        uni.showModal({
          content: err.message || '请求服务失败',
          showCancel: false
        })
      })
    },
    // 确定回调事件
    treeConfirm(e) {
      this.formData.department_id = [e[0]._id]
      this.formData.department_name = e[0].name
    },
    // 取消回调事件
    treeCancel(e) {
      // console.log(e)
    },
    // 显示树形选择器
    showTree(e) {
      this.list = [];
      if (e === 'department') {
        this.selectType = 'department';
        this.getDepartment('');
      } else {
        this.selectType = 'manager';
        this.getManager('');
      }
    
      this.$refs.tkitree._show();
    },
    /**
     * 触发表单提交
     */
    submit() {
      uni.showLoading({
        mask: true
      })
      this.$refs.form.submit().then((res) => {
        this.submitForm(res)
      }).catch((errors) => {
        uni.hideLoading()
      })
    },
    submitForm(value) {
      value.avatar = this.formData.avatar
      // 使用API提交数据，替代clientDB
      api.contacts.add(value).then((res) => {
        uni.showToast({
          icon: 'none',
          title: '新增成功'
        })
        setTimeout(() => uni.navigateBack(), 500)
      }).catch((err) => {
        uni.showModal({
          content: err.message || '请求服务失败',
          showCancel: false
        })
      }).finally(() => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style>
	.uni-container {
		padding: 15px;
		width: 100%;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}
	
	.depart{
		width: 90%;
		margin-left: 5%;
		text-align: center;
		border: 1px #dcdfe6 solid;
		border-radius: 3px;
		padding: 10rpx;
	}
</style>